// @documents https://jsonform.github.io/jsonform/playground/index.html?example=templating-idx
class RecordTimeJs
{
    constructor(key, schema)
    {
        this.addCss();
        jQuery('body').append(this.popup());
        this.initForm();
    }

    addCss()
    {
        let cssLinks = '<link rel="stylesheet" type="text/css" href="https://jsonform.github.io/jsonform/deps/opt/bootstrap.css" />';
            cssLinks += '<link rel="stylesheet" type="text/css" href="https://jsonform.github.io/jsonform/deps/opt/bootstrap-wysihtml5.css" />';
            cssLinks += '<link rel="stylesheet" type="text/css" href="https://jsonform.github.io/jsonform/deps/opt/spectrum.css" />';
        jQuery('head').append(cssLinks);
    }

    popup()
    {
		let layout = `
        <section id="create-issue-dialog" class="aui-dialog2 aui-layer jira-dialog2 jira-dialog-core aui-dialog2-large jira-dialog-open jira-dialog-content-ready" role="dialog" aria-labelledby="jira-dialog2__heading" style="z-index: 3000;" data-aui-focus="false" data-aui-blanketed="true" open="" tabindex="-1">
        <header class="aui-dialog2-header jira-dialog-core-heading">
        <h2 id="jira-dialog2__heading" title="Record Time">Record Time</h2>
        </header>
        <div class="aui-dialog2-content jira-dialog-core-content">
        <div class="qf-container">
        <div class="form-footer">
        <div class="dialog-error">
        <div id="record-time-form-container"><form class="aui"></form></div>
        </div>
        </div>
        </div>
        </div>
        <footer class="aui-dialog2-footer">
        <div class="buttons-container form-footer">
        <div class="buttons">
        <span class="throbber"></span>
        <button class="aui-button aui-button-link cancel" id="aui-dialog-close" resolved="">Close</button>
        </div></div></footer></section>
        <div id="jira-bg-mark" aria-hidden="true" class="aui-blanket" tabindex="0" style="z-index: 2980;"></div>
`;
        return layout;
    }

    initForm()
    {
        var schame = {
            "schema": {
              "thoughts": {
                "type": "array",
                "items": {
                  "title": "A thought",
                  "type": "string"
                }
              }
            },
            "form": [
              {
                "type": "array",
                "items": [{
                  "key": "thoughts[]",
                  "title": "Thought number {{idx}}"
                }]
              }
            ]
          };

          jQuery('#record-time-form-container form').jsonForm(schame);
    }
}
var RcTimeJs = new RecordTimeJs();
